<template>
  <div>
    <div class="title">
      <img style="" src="@/assets/images//favicon.png">
      <span>垃圾分类查询</span>
    </div>
    <van-search
      v-model="rubbishName"
      placeholder="请输入搜索名字,如饮料瓶,废电池,西瓜皮..."
      @search="onSearch"
    />
    <van-notice-bar
      left-icon="volume-o"
      text="用我们双手爱护我们的地球,爱护我们的环境。"
    />
    <van-grid :column-num="2">
      <template v-for="(item, index) in types.data">
        <van-grid-item :key="index">
          <img :src="item.icon" style="width: 120px" @click="about(index)">
        </van-grid-item>
      </template>
    </van-grid>
    <van-collapse
      v-for="(item, index) in types.data"
      :key="index"
      v-model="types.type"
      accordion
    >
      <van-collapse-item :name="item.type" accordion>
        <template #title>
          <div class="tag-title">
            <div
              :class="{
                type1: item.type === '1',
                type2: item.type === '2',
                type3: item.type === '3',
                type4: item.type === '4',
              }"
              style="font-size: 16px"
            >
              {{ item.name }}
            </div>
          </div>
        </template>
        <van-tag
          v-for="(tag, number) in item.tags"
          :key="number"
          class="tag"
          type="primary"
          size="large"
          @click="changeSearch(tag)"
        >{{ tag }}</van-tag>
      </van-collapse-item>
    </van-collapse>
    <p />
    <p>
      鼓励将可回收物卖入废品回收系统，或交投至两融合服务点，或投放至可回收物收集容器；
    </p>
    <p>严禁将有害垃圾投放到其他的生活垃圾收集容器；</p>
    <p>日常家庭生活垃圾要做到干、湿垃圾两分开。</p>
    <p style="color: red">本页面今限学习使用,数据如有偏差请按当地公布规则执行</p>
    <van-popup
      ref="popup"
      v-model="showHint"
      class="type-card"
      :round="true"
      :closeable="true"
      @close="closeAbout"
    >
      <div
        ref="card"
        :class="{
          type1: currentType.type === '1',
          type2: currentType.type === '2',
          type3: currentType.type === '3',
          type4: currentType.type === '4',
        }"
      >
        <div class="title">
          <span v-if="rubbishName" style="color: #555">{{ rubbishName }}: </span>{{ currentType.mainTitle }}
        </div>
        <div class="child1">
          <img :src="currentType.icon" style="width: 120px;height: 118px;">
          <div>
            <div>{{ currentType.desc[0] }}</div>
            <div>{{ currentType.desc[1] }}</div>
          </div>
        </div>
        <div class="child2">
          <div>{{ currentType.include[0] }}</div>
          <div>{{ currentType.include[1] }}</div>
        </div>
        <div class="child2">
          <div>{{ currentType.putin.title }}</div>
          <div>
            <ul v-for="(value, index) in currentType.putin.data" :key="index">
              <li>{{ value }}</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="card" @click="download">生成卡片分享给你的朋友吧</div>
    </van-popup>
    <van-popup
      v-model="showCard"
    >
      <img class="card-img" :src="dataURL" alt="">
      <div class="card">长按卡片保存到相册</div>
    </van-popup>
  </div>
</template>

<script>
import { typesGet } from '@/api/types.js'
// import html2canvas from 'html2canvas'
import html2canvas from '@/assets/js/html2canvas.esm.js'
// const url = 'https://api.choviwu.top/garbage/getGarbage'
export default {
  name: 'Home',
  props: {},
  data() {
    return {
      rubbishName: '',
      types: {
        type: '1',
        data: [
          {
            type: '1',
            icon: require('@/assets/images/ico-1.jpg'),
            name: '常见有害垃圾',
            mainTitle: '有害垃圾',
            desc: [
              '有害垃圾是指',
              '对人体健康或者自然环境造成直接或潜在危害的废弃物'
            ],
            include: [
              '有害垃圾主要包括',
              '废电池、油漆桶、荧光灯管、废药品及其包装物等'
            ],
            putin: {
              title: '有害垃圾投放要求',
              data: [
                '投放时请注意轻放',
                '易破损的请连带包装或包裹后轻放',
                '如易挥发，请密封后投放'
              ]
            },
            tags: [
              '废电池',
              '温度计',
              '油漆桶',
              '荧光灯管',
              '废药品',
              '杀虫剂',
              '医用纱布',
              '医用棉签',
              '打火机',
              '创口贴',
              '酒精',
              '调色板',
              '油漆',
              '过期药片',
              '水彩笔',
              '农药瓶',
              '口服液瓶',
              '香水瓶',
              '荧光棒',
              '过期化妆品'
            ]
          },
          {
            type: '2',
            icon: require('@/assets/images/ico-2.jpg'),
            name: '常见可回收物',
            mainTitle: '可回收物',
            desc: [
              '可回收物是指：',
              '适宜回收利用和资源化利 用的，如：玻、金、塑、 纸、衣'
            ],
            include: [
              '可回收物主要包括',
              '酱油瓶、玻璃杯、平板玻璃、易拉罐、饮料瓶、 洗发水瓶、塑料玩具、书本、报纸、广告单、 纸板箱、衣服、床上用品等'
            ],
            putin: {
              title: '可回收物投放要求',
              data: [
                '轻投轻放',
                '清洁干燥，避免污染',
                '废纸尽量平整',
                '立体包装物请清空内容物，清洁后压扁投放',
                '有尖锐边角的，应包裹后投放'
              ]
            },
            tags: [
              '牙刷',
              '易拉罐',
              '饮料瓶',
              '洗发水瓶',
              '塑料玩具',
              '书本',
              '报纸',
              '纸板箱',
              '衣服',
              '床上用品',
              '玻璃杯',
              '塑料瓶',
              '食品罐头',
              '旧书包',
              '旧手提包',
              '旧鞋子',
              '牛奶盒',
              '旧玩偶',
              '玻璃壶',
              '旧铁锅'
            ]
          },
          {
            type: '3',
            icon: require('@/assets/images/ico-3.jpg'),
            name: '常见湿垃圾',
            mainTitle: '湿垃圾',
            desc: ['湿垃圾是指：', '日常生活垃圾产生的容易腐烂的生物质废弃物'],
            include: [
              '湿垃圾主要包括',
              '剩菜剩饭、瓜皮果核、花卉绿植、过期食品等'
            ],
            putin: {
              title: '湿垃圾投放要求',
              data: [
                '纯流质的食物垃圾，如牛奶等，应直接倒进下水口',
                '有包装物的湿垃圾应将包装物去除后分类投放，包装物请投放到对应的可回收物或干垃圾容器'
              ]
            },
            tags: [
              '剩菜剩饭',
              '瓜皮果壳',
              '花卉绿植',
              '过期食品',
              '橙皮',
              '葱',
              '饼干',
              '蕃茄酱',
              '宠物饲料',
              '蛋壳',
              '西瓜皮',
              '马铃薯',
              '鱼骨',
              '葡萄干',
              '甘蔗',
              '玉米',
              '骨头',
              '虾皮',
              '蛋糕',
              '面包'
            ]
          },
          {
            type: '4',
            icon: require('@/assets/images/ico-4.jpg'),
            name: '常见干垃圾',
            mainTitle: '干垃圾',
            desc: [
              '干垃圾是指：',
              '除有害垃圾、可回收物、 湿垃圾以外的其他生活废弃物'
            ],
            include: [
              '干垃圾主要包括',
              '餐盒、餐巾纸、湿纸巾、卫生间用纸、塑料袋、 食品包装袋、污染严重的纸、烟蒂、纸尿裤、 一次性杯子、大骨头、贝壳、花盆、陶瓷等'
            ],
            putin: {
              title: '干垃圾投放要求',
              data: ['尽量沥干水分', '难以辨识类别的生活垃圾投入干垃圾容器内']
            },
            tags: [
              '回形针',
              '餐盒',
              '餐巾纸',
              '湿纸巾',
              '口香糖',
              '口红',
              '隐形眼镜',
              '美瞳',
              '尿不湿',
              '卫生间用纸',
              '塑料袋',
              '烟蒂',
              '纸尿裤',
              '一次性杯子',
              '大骨头',
              '贝壳',
              '花盆',
              '陶瓷',
              '猫砂',
              '化妆刷'
            ]
          }
        ]
      },
      currentType: {},
      showHint: false,
      showCard: false,
      dataURL: ''
    }
  },
  created() {
    this.currentType = this.types.data[1]
  },
  mounted() {},
  methods: {
    closeAbout() {
      this.rubbishName = ''
    },
    about(index) {
      this.showHint = !this.showHint
      this.currentType = this.types.data[index]
    },
    /**
     * 在本地进行文件保存
     * @param  {String} data     要保存到本地的图片数据
     * @param  {String} filename 文件名
     */
    saveFile(data, filename) {
      const save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a')
      save_link.href = data
      save_link.download = filename
      const event = document.createEvent('MouseEvents')
      event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
      save_link.dispatchEvent(event)
    },
    download() {
      // window.pageYoffset = 0
      // document.documentElement.scrollTop = 0
      // document.body.scrollTop = 0
      setTimeout(() => {
        html2canvas(
          this.$refs.card,
          { html2canvas,
            allowTaint: true,
            taintTest: false,
            scale: window.devicePixelRatio,
            scrollY: 0,
            scrollX: 0,
            useCORS: true }
        ).then(canvas => {
          this.dataURL = canvas.toDataURL('image/png')
          // this.saveFile(this.dataURL, `${this.rubbishName}.png`)
          this.showHint = false
          this.showCard = true
        })
      }, 500)
    },
    async onSearch() {
      if (this.rubbishName) {
        const ret = await typesGet({
          name: this.rubbishName
        })
        if (ret.code === 200) {
          const type = ret.data.split('或')[0]
          if (type.indexOf('有害') > -1) {
            this.about(0)
          } else if (type.indexOf('可回收') > -1) {
            this.about(1)
          } else if (type.indexOf('湿') > -1) {
            this.about(2)
          } else if (type.indexOf('干') > -1) {
            this.about(3)
          }
        }
      }
    },
    changeSearch(tag) {
      this.rubbishName = tag
      this.onSearch()
    }
  }
}
</script>

<style lang="less" scoped>
.title {
  margin: 35px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    width: 50px;
  }
  span {
    margin-left: 10px;
  }
}
.tag {
  margin: 3px;
}
.van-icon {
  top: 4px;
  font-size: 20px;
}
.tag-title {
  > .type1 {
    color: #a94442;
  }
  > .type2 {
    color: #337ab7;
  }
  > .type3 {
    color: #8a6d3b;
  }
  > .type4 {
    color: #333;
  }
}
.type-card {
  width: 90%;
  height: 70%;

  font-size: 12px;
  color: #d73723;
  > .type1 {
    padding: 8px;
    color: #d73723;
    .child2 {
      div:nth-child(1) {
        background: #d73723;
      }
    }
  }
  > .type2 {
    padding: 8px;
    color: #00457c;
    .child2 {
      div:nth-child(1) {
        background: #00457c;
      }
    }
  }
  > .type3 {
    padding: 8px;
    color: #653f34;
    .child2 {
      div:nth-child(1) {
        background: #653f34;
      }
    }
  }
  > .type4 {
    padding: 8px;
    color: #2a2925;
    .child2 {
      div:nth-child(1) {
        background: #2a2925;
      }
    }
  }
  .title {
    font-size: 18px;
    font-weight: 700;
  }
  .child1 {
    display: flex;
    justify-content: space-between;
    div {
      margin-left: 5px;
      div:nth-child(1) {
        padding-bottom: 2px;
        font-weight: 700;
      }
    }
  }
  .child2 {
    margin-top: 10px;
    div:nth-child(1) {
      background: #d73723;
      text-align: center;
      color: #fff;
      height: 34px;
      line-height: 34px;
    }
    div:nth-child(2) {
      padding: 10px;
    }
  }
}
.card{
  font-size: 14px;
  color: rgb(65, 65, 65);
  text-align: center;
  text-decoration: underline;
  margin-bottom: 5px;
}
.card-img{
  width: 350px;
}
p {
  padding: 2px;
  margin-left: 10px;
  margin-right: 10px;
  color: #333;
  font-size: 12px;
}
</style>
